<template>
    <div style="background-color: #e9eef3;">
        <!--联系人管理头部-->
        <el-row class="head" style="background: #f8f6f8;">
            <el-col :span="24">
                <h1 class="contract_title" >联系人管理</h1>
                <span>/ 管理联系人相关信息</span>
            </el-col>
        </el-row>
        <!--联系人中间部分-->
        <div class="nav">
            <div class="nav-item">
                <el-button type="text" @click="open_addLinkman">
                    <i class="iconfont icon-qianbi">  新增</i>
                </el-button>
            </div>
            <div class="nav-item">
                <el-form style="display:inline-block; font-size:12px">
                    <div class="nav-item nav-input" style="border:none">
                        <el-input ></el-input>
                    </div>
                    <div style="display:inline-block;">
                        <el-button class="nav-butt">搜索</el-button>
                    </div>
                </el-form>
            </div>
        </div>

        <!--联系人导航部分 tabs-->
        <div class="content">
            <el-tabs v-model="linkman_man_activeName" type="border-card">
                <el-tab-pane   name="first">
                    <span slot="label">全部</span>
                    <linkman_table :linkMan="linkMan" :home="this" ></linkman_table>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label">A</span>
                    <linkman_table></linkman_table>
                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">B</span>
                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">C</span>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label">D</span>
                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">E</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">F</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">G</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">H</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">I</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">J</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">K</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">L</span>

                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label">M</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">N</span>
                    <
                </el-tab-pane>
                <el-tab-pane  name="ten">
                    <span slot="label">O</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">P</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">Q</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">R</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">S</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">T</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">U</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">V</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">W</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">X</span>

                </el-tab-pane>
                <el-tab-pane  >
                    <span slot="label">Y</span>

                </el-tab-pane>
                <el-tab-pane >
                    <span slot="label">Z</span>

                </el-tab-pane>
                <!--分页-->
                <div class="block" style="margin-top:10px">
                    <el-pagination background layout="total, prev, pager, next"
                                   :total="total"
                                   :current-page.sync="curr_page"
                                   :page-size="page_size"
                                   @current-change="changge_page">
                    </el-pagination>
                </div>
            </el-tabs>

        </div>

        <!--添加联系人信息-->
        <el-dialog  :visible.sync="linkman_manVisitable" width="50%" :modal="false" title="新增联系人" :close-on-click-modal="false" class="paddchang"  @close="closeLinkAdd" destroy-on-close>
            <add_linkman_info ref="addLinkRef"></add_linkman_info>
        </el-dialog>
    </div>
</template>

<script>
    import linkman_table from "./linkman_table";
    import add_linkman_info from "./add_linkman_info";
    export default {
        name: "linkman_manage",
        components: {linkman_table,add_linkman_info}
        ,data:function () {
            return{
                linkman_man_activeName:'first'
                ,linkman_manVisitable:false
                ,linkMan:[]
                ,total:0
                ,curr_page:1
                ,page_size:5
            }
        },
        methods:{
            /*获取所有联系人+分页*/
            get_linkman(curr_page,page_size){
               this.$axios.get("api/customer/all_linkman",{params:{"currPage":curr_page,"pageSize":page_size}})
                   .then(v => {
                    this.linkMan = v.data.data2;
                       window.console.log("所有联系人：");
                       window.console.log(this.linkMan);
                       this.total = v.data.total2;
               }).catch()
            },
            //分页
            changge_page(curr){
                window.console.log(curr);
                this.get_linkman(curr,this.page_size);
            },
            open_addLinkman(){
                this.linkman_manVisitable = true
                //添加联系人时，将本页面数据全部存入store中管理
                this.$store.dispatch("setVueLinkManManage",this)
            },
            closeLinkAdd(){
                //清空表单
                this.$refs.addLinkRef.cusBelong = ''
                this.$refs.addLinkRef.cleanContact();
                this.linkman_manVisitable = false
            }
        },
        created() {
            this.get_linkman(this.curr_page,this.page_size);
        }


    }
</script>

<style scoped>
.icon-mingpian{
    font-size: 30px;
}
.nav {margin: 20px;background: #fcfbfd;width: 100%-40px;height:auto!important;min-height: 15px;line-height: 45px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
.nav .nav-item {display: inline-block;height: 45px;padding: 0px 10px;    border-right: 1px solid #eee;line-height: 45px;}
.content {background: #fcfbfd;width: 100%-40px;min-height:10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin: 20px}
.el-col span {color: #b4b4bc;margin-left: 8px;font-size: 14px;}

</style>